<!--
 * @Autor: ZhangYao
 * @Date: 2022-11-16 15:45:09
 * @LastEditors: ZhangYao
 * @LastEditTime: 2023-02-27 09:53:28
-->
<template>
  <el-row>
    <h6 class="create_title">
      {{ title }}
    </h6>
    <el-form ref="form" :model="form" label-width="200px" :rules="rules">
      <el-form-item label="所属任务分类:" prop="pid">
        <TreeSelect v-model="form.pid" :options="treeOption" :selectStyle="{width: '500px'}"></TreeSelect>
      </el-form-item>
      <el-form-item label="作业名称:" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入名称"
          show-word-limit
          maxlength="100"
          style="width: 500px;"
        />
      </el-form-item>
      <el-form-item label="调度类型:" prop="taskScheduleType">
        <el-select v-model="form.taskScheduleType" placeholder="请选择任务类型" style="width: 500px;">
          <el-option
            v-for="item in taskScheduleTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="任务级别:" prop="level">
        <el-select v-model="form.level" placeholder="请选择任务级别" style="width: 500px;">
          <el-option
            v-for="item in taskLevel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="描述:" prop="note">
        <el-input
          v-model="form.note"
          placeholder="请输入名称"
          show-word-limit
          maxlength="500"
          style="width: 500px;"
          type="textarea"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitHandler('form')">
          保存
        </el-button>
        <el-button @click="backHandler">
          取消
        </el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
import BaseEditForm from '@/views/common/mixins/BaseEditForm'
import { deepMergeLeft } from './utils/index'
import TreeSelect from './treeSelect.vue'
import { getTree } from '@/api/workDevelopment/index'
import request from './utils/request'

export default {
  components: { TreeSelect },
  mixins: [BaseEditForm],
  props: {
    detail: {
      required: false,
      type: Object,
      default: () => {}
    }
  },
  data() {
    const form = this.initForm()
    const rules = this.initRules()
    return {
      treeOption: [],
      title: '新增作业',
      form: form,
      rules: rules,
      taskTypeOptions: [
        { label: 'FlinkSQL', value: 'FlinkSQL' },
        { label: 'FlinkJar', value: 'FlinkJar' },
        { label: 'Flink图形化开发', value: 'FlinkComponent' }
      ],
      taskScheduleTypeOptions: [
        { label: '实时调度', value: 'realtime' },
        { label: '周期调度', value: 'batch' }
      ],
      taskLevel: [
        {label: 'T0', value: 0},
        {label: 'T1', value: 1},
        {label: 'T2', value: 2},
        {label: 'T3', value: 3},
        {label: 'T4', value: 4},
      ]
    }
  },
  activated() {
    this.getTreeOptions();
    if (this.detail.id) {
      this.title = '编辑作业'
      this.getForm(this.detail.id);
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    } else {
      deepMergeLeft(this.form, this.initForm())
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    }
  },
  methods: {
    getForm(id) {
      request({
        url: '/flink/taskDir/getById',
        method: 'get',
        params: {id}
      }).then(res=> {
        this.form = res;
      });
    },
    getTreeOptions() {
      getTree({pid:-1}).then((data) => {
        if (data) {
          let treeTop = [{
            name: '全部',
            id: -1,
            children: data,
            type:1
          }];
          this.treeOption = treeTop;
          console.log('treeOption', this.treeOption);
        }
      })
    },
    handleSelectValueChange(pid) {
      this.form.pid = pid;
    },
    customSubmitHandler() {
      console.log('customSubmitHandler', this.form);
      let url = this.form.id ? '/flink/taskDir/update' : '/flink/taskDir/addTaskDir';
      request({
        url,
        method: 'post',
        data: this.form
      }).then(res=> {
        this.backHandler()
      });
    },
    initForm() {
      return {
        pid: null,
        level: null,
        name: null,
        taskScheduleType: null,
        id: null,
        note: null,
        type: 2
      }
    },
    initRules() {
      return {
        pid: [{
          required: true, message: '请选择所属任务分类', trigger: 'change'
        }],
        name: [{
          required: true, message: '请输入任务名称', trigger: 'change'
        }],
        taskScheduleType: [{
          required: true, message: '请选择任务类型', trigger: 'change'
        }],
        level: [{
          required: true, message: '请选择优先级', trigger: 'change'
        }],
      }
    }
  }
}
</script>
